import React,{useEffect,useState} from 'react';
import "@/views/Index/Swiper/Swiper.scss"
import { Table, Button, TablePaginationConfig, notification,Input,Breadcrumb, message } from 'antd'
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table'
import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons';
import { banner_list,banner_delete,banner_Allremove } from '../../../api/api';
interface Props {

}
interface DataType {
    user: string;
    nickname: string;
    name: string;
    phone: string;
    role: string;
    key: string;
    img:string;
}
function Swiper(props:Props) {
    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title:'序号',
            dataIndex:'index',
            key:'index',
            render:(text,record,index)=>`${index+1}`
        },
        {
            title: '图片',//表格列的名字(显示在表格头上)
            dataIndex: 'img',//数据对应的属性名
            render: (_, record:any) => (
                <>
                   <img src={record.img} width='100' height='100'/>
                </>
            )

        },
        {
            title: '链接',
            dataIndex: 'link',
            key: 'role'
        },
        {
            title: '提示',
            dataIndex: 'alt',
            key: '_id'

        },
        {
            title: '操作',
            key: 'action',
            render: (_, record, key) => (
                <>
                    <DeleteOutlined className='del' onClick={() => {delSwiper(record)  }} />
                </>
            )
        }
    ]
    var navigate = useNavigate()
    var [swiperlist,setSwiper] = useState([])
    useEffect(()=>{
        banner_list().then((res)=>{
            console.log(res.data);
            setSwiper(res.data.data)
        })
   
        
    },[])
     // 点击添加轮播图
     var routerSwiper = ()=>{
        navigate('/index/addswiper')
    }
    // 点击按钮删除轮播图
    var delSwiper = (record:any)=>{
        console.log(record);
        banner_delete({bannerid:record.bannerid}).then((res)=>{
            console.log(res.data);
            notification.success({message:res.data.message})
            banner_list().then((res)=>{
                setSwiper(res.data.data)
            })
        })

        
    }
    // 点击清空轮播图数据
    var Allremove = ()=>{
        banner_Allremove().then((res)=>{
            console.log(res.data);           
            notification.success({message:'清除轮播图所有数据'})
            banner_list().then((res)=>{
                setSwiper(res.data.data)
            })
        })

    }
    return (
        <div className='swiper'>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
              <Breadcrumb.Item>轮播图管理</Breadcrumb.Item>
              <Breadcrumb.Item>轮播图列表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="opet">
                {/* <Search style={{ width: 300, marginRight: 20 }} placeholder="输入员工姓名"  enterButton /> */}
                <Button type="primary" onClick={routerSwiper}>添加轮播图 +</Button>
                <Button type="primary" id='exc' >导出Excel<ArrowDownOutlined /></Button>
                <Button type='primary' danger onClick={Allremove}>清空轮播图数据  </Button>
            </div>
            {/* 表格组件 */}
            {/* columns 表格每一列如何渲染 */}
            {/* dataSource 表格的数据源 */}
            <Table columns={columns} dataSource={swiperlist} />
        </div>
    );
}

export default Swiper;